<template>
  <div>
    <div class="nav">
      <span class="iconfont iconjiantou" @click="$router.replace('/')"></span>
      个人中心
    </div>
    <div class="user">
      <div class="navs" @click="eait">
        <div class="photo">
          <img :src="$axios.defaults.baseURL+datas.head_img" v-if="datas.head_img" />
          <img src="../../assets/logo.png" v-else />
        </div>
        <div class="bos">
          <div class="name">
            <span class="iconfont iconxingbienan" v-if="datas.gender==1"></span>

            <span class="iconfont iconxingbienv" v-else-if="datas.gender==0"></span>
            <div class="login" v-else>
              <span @click="$router.replace('/login')">前往登录</span>
            </div>
            {{datas.nickname}}
          </div>
        </div>

        <div class="icon">
          <span class="iconfont iconjiantou1"></span>
        </div>
      </div>
      <div class="texts">
        <texts textLeft="我的关注" textRight="关注的用户" @back="watchful" />
        <texts textLeft="我的跟帖" textRight="跟帖/回复" @back="follow" />
        <texts textLeft="我的收藏" textRight="文章/视频" @back="collect" />
        <texts textLeft="栏目管理" textRight="管理栏目" @back="management" />
        <texts textLeft="设置" textRight @back="back" />
      </div>
    </div>
  </div>
</template>

<script>
// import texts from "../../components/text";
export default {
  components: {
    texts: () => import("../../components/text")
  },
  data() {
    return {
      datas: {}
    };
  },
  methods: {
    watchful() {
      this.$router.replace({ name: "watchful" });
    },
    follow() {
      this.$router.replace({ name: "follow" });
    },
    collect() {
      this.$router.replace({ name: "collect" });
    },
    back() {
      this.$router.replace({ name: "setting" });
    },
    management() {
      this.$router.replace({ name: "management" });
    },
    eait() {
      this.$router.replace({ name: "eait" });
    }
  },
  created() {
    this.$axios({
      url: "/user/" + localStorage.getItem("userId"),
      method: "get",
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token")
      }
    })
      .then(res => {
        if (res.data.message == "获取成功") {
          this.datas = res.data.data;
        } else if (message == "用户信息验证失败") {
          // 发现用户信息无效，清理 userId, token 再跳到登录页
          localStorage.removeItem("token");
          localStorage.removeItem("userId");
          this.$router.replace("/login");
        } else {
          this.$toast.fail("获取失败");
        }
      })
      .catch(err => {
        // this.$dialog.alert({ message: res.data.message });
      });
  }
};
</script>

<style lang="less" scoped>
.nav {
  text-align: center;
  // margin-top: 15px;
  line-height: 50px;
  margin-bottom: 20px;
  font-size: 14px;
  // background-color: lightblue;
  height: 50px;
  // color: beige;
  border-radius: 0 0 20px 20px;
  border: 2px solid #eee;
  .iconjiantou {
    position: absolute;
    left: 20px;
    // top: 20px;
    font-size: 16px;
  }
}
.user {
  //  /
  //   overflow: hidden;
  .navs {
    // background-color: #eee;
    margin: 50px 5px 0px 6px;

    height: 120px;
    width: 350px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    font-size: 14px;
    // border-bottom: 3px solid #eee;
    position: relative;
    // background-color: cadetblue;
    // border-radius: 10px;
    .photo {
      top: -20px;
      left: 140px;
      position: absolute;
      //   margin: 15px;
      width: 70px;
      height: 70px;
      overflow: hidden;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .bos {
      flex: 1;
      padding: 30px 0px 0px 5px;

      .name {
        font-size: 16px;
        text-align: center;
        margin: 10px;
        .login {
          text-align: center;
          margin: 15px 0 0 15px;
          color: #ccc;
        }
        .iconxingbienan {
          padding: 5px;
          font-size: 16px;
          color: blue;
        }
        .iconxingbienv {
          padding: 5px;
          color: pink;
          font-size: 16px;
        }
      }
    }
    .icon {
      // margin-top: 43px;
      .iconjiantou1 {
        font-size: 20px;
      }
    }
  }
  .texts {
    // border-radius: 10px;
    width: 320px;
    // background-color: #fff;
    margin: 0 3px;
    padding: 15px;
    border-radius: 20px 20px;
    border: 2px solid #eee;
  }
}
</style>